import './OptionsTemp.scss'
import { App, Tree } from 'antd'
import { useEffect, useState } from 'react'
import { ColorCallBack, assemblyDataA01, strOfurlParamsFunc } from '../Utils'
import { LayoutDeftula } from '../Config/LayoutDeftula'
import { useRequest } from 'alova/client';
import { Http } from '../Utils/Api';

const OptionsComA01 = ({ config, apiData, TempEvent }) => {

    const { message } = App.useApp()
    const { send } = useRequest(data => Http(data), { immediate: false })


    // console.log('OptionsTempA01', config, apiData)
    const configuration = config || LayoutDeftula.Options01
    const { params, value, urlList, listType, dataList, apiUrl, apiMethod, apiParams, apiHttp, apiKey, apiValue,
        padding, backgroun, backgrounDeg, borderRadius, borderSize, borderType, borderColor,
        status, top_title, top_padding, top_backgroun, top_backgrounDeg, top_borderSize, top_borderType, top_borderColor, tree_iconSize, tree_iconColor,
        top_fill, top_fillDeg, top_fontSize, top_fontFamily, top_fontWeight, top_fontStyle, top_shadowX, top_shadowY, top_shadowS, top_shadowC,
        tree_fill, tree_fillDeg, tree_fontSize, tree_fontFamily, tree_fontWeight, tree_fontStyle, tree_shadowX, tree_shadowY, tree_shadowS, tree_shadowC, tree_padding,
        active_backgroun, active_backgrounDeg, active_borderRadius, active_borderSize, active_borderType, active_borderColor, active_fill, active_fillDeg
    } = configuration

    const [OpenKey, setOpenKey] = useState([])
    const [TreeData, setTreeData] = useState([])
    const [Active, setActive] = useState([value])

    const backStyle = {
        padding: String(padding)?.split(',').map(num => num + 'px').join(' '),
        background: ColorCallBack(backgroun, backgrounDeg),
        borderRadius: borderRadius,
        border: `${borderSize}px ${borderType} ${borderColor}`
    }

    const topStyle = {
        padding: String(top_padding)?.split(',').map(num => num + 'px').join(' '),
        background: ColorCallBack(top_backgroun, top_backgrounDeg),
        border: `${top_borderSize}px ${top_borderType} ${top_borderColor}`
    }

    const topTitle = {
        '--background': ColorCallBack(top_fill, top_fillDeg),
        fontSize: top_fontSize,
        fontFamily: top_fontFamily,
        fontWeight: top_fontWeight,
        fontStyle: top_fontStyle,
        filter: `drop-shadow(${top_shadowX}px ${top_shadowY}px ${top_shadowS}px ${top_shadowC})`
    }

    const treeStyle = {
        '--iconSize': tree_iconSize + 'px',
        '--iconColor': tree_iconColor,

        '--treeBackground': ColorCallBack(tree_fill, tree_fillDeg),
        '--treeFontSize': tree_fontSize + 'px',
        '--treeFontFamily': tree_fontFamily,
        '--treeFontWeight': tree_fontWeight,
        '--treeFontStyle': tree_fontStyle,
        '--treeFilter': `drop-shadow(${tree_shadowX}px ${tree_shadowY}px ${tree_shadowS}px ${tree_shadowC})`,
        '--treePadding': String(tree_padding)?.split(',').map(num => num + 'px').join(' '),

        '--activeBackground': ColorCallBack(active_backgroun, active_backgrounDeg),
        '--activeBorder': `${active_borderSize}px ${active_borderType} ${active_borderColor}`,
        '--activeFontBack': ColorCallBack(active_fill, active_fillDeg),
        '--activeRadius': active_borderRadius + 'px'
    }


    const onSelect = (e) => {
        if (e.length === 0) return false
        else {
            setActive(e)
            if (params) TempEvent.emit({ type: 'onOptionsSwitch', data: { params: { [params]: encodeURIComponent(e) }, urlList } })
            else message.info({ content: '未设置发送参数!', key: 'OptionsComA01' })
        }
    }

    useEffect(() => {
        if (listType) {
            if (listType === 'ApiMapping') {
                send({ method: apiMethod, url: apiUrl, path: apiHttp, params: { ...strOfurlParamsFunc(apiParams) } }).then(res => {
                    setOpenKey(res.data.all)
                    setTreeData(res.data.list)
                })
            } else {
                // const data = dataList.map(item => ({ label: item.dataMapping, value: item.dataValue }))
                // setData(data)
            }
        }
    }, [config, apiData])


    return (
        <div className='OptionsComA01' style={backStyle}>
            {status &&
                <div className='Title' style={topStyle}>
                    <div style={topTitle}>{top_title}</div>
                </div>
            }
            <div className='Tree' style={treeStyle}>
                <Tree
                    blockNode
                    selectedKeys={Active}
                    fieldNames={{ key: apiKey, title: apiValue }}
                    treeData={TreeData}
                    onSelect={onSelect}
                />
            </div>
        </div>
    );
};

export default OptionsComA01;